<script type="text/javascript">
/* <![CDATA[ */ 
var mouseShift = null;
var resizing = false;
var mapPosition = getPosition($('gmap'));
var mapSize = getSize($('gmap'));
var shiftVector= new Point(-6,15); // cursor shift when dragging. According to save, cancel buttons size
var mouseMoveMode = "waiting"
addToOnLoad(function() 
{
      movingObject = $('map_area_selection');
      resizedObject = $('map_area_selection_table');
      setSize(resizedObject, new Point(200, 200));
       $('map_container').onmousemove = handleMouseMove;
       $('map_area_selection').onmousemove = handleMouseMove;
    });
  
  function handleMouseMove(mouseEvent_)
  {
      var mousePos = getMousePosition(mouseEvent_);
      if (mouseMoveMode=="startDrag")
      {
          mouseShift = null;
          mouseMoveMode="drag"
      }
      if (mouseMoveMode=="drag")
      {
          if (mouseShift == null) {
            mouseShift = mousePos._sub(getPosition(movingObject));
          }
          var vX = mousePos.x - mouseShift.x;
          var vY = mousePos.y - mouseShift.y;
          setPosition(movingObject, p=new Point(vX, vY));
      }
      if (mouseMoveMode=="resize")
      {
          var pos = getPosition(movingObject)._add(shiftVector);  //new Point(394,415);
          mouseShift = mousePos._sub(pos); 
          setSize(resizedObject, mouseShift);  
      }
      
  }
  
  
  function setMouseMoveMode(mode) {
    if (!mode)
        mode='waiting'
    
    // changing mode only when changing from or to waiting
    if (mouseMoveMode == "waiting" || mode=="waiting" )
        mouseMoveMode = mode
  }

  // on the basis of function from quirksmode.org 
  function findPosition(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }
point = new Point(curleft,curtop);
return point;
  }  

  function calculateCoordinates() {
      
      bounds = gmap.getBounds();
      minLat = bounds.getSouthWest().lat();
      minLng = bounds.getSouthWest().lng();
      maxLat = bounds.getNorthEast().lat();
      maxLng = bounds.getNorthEast().lng();
      
      gmapDiv = $('gmap');
      selectedArea = $('map_area_selection_table');

      gmapLeftTop = findPosition(gmapDiv); 
      selectedAreaLeftTop = findPosition(selectedArea);
      selectedAreaRightBottom = selectedAreaLeftTop._add(new Point(selectedArea.offsetWidth, selectedArea.offsetHeight));
      
      p1 = selectedAreaLeftTop._sub(gmapLeftTop);
      p2 = selectedAreaRightBottom._sub(gmapLeftTop);

      point1 = new GPoint(p1.x,p1.y);
      point2 = new GPoint(p2.x,p2.y);
      
      latLng1 = gmap.fromContainerPixelToLatLng(point1);
      latLng2 = gmap.fromContainerPixelToLatLng(point2);
      
      $("region_start_x").value=latLng1.lng();
      $("region_start_y").value=latLng1.lat();
      $("region_end_x").value=latLng2.lng();
      $("region_end_y").value=latLng2.lat();       
  }
/* ]]> */
</script>
<%= flash_info_tag %>
<div id="map_area_selection" style="display: none; top: 400px; left: 400px;" >
  <p id="map_save_cancel_btns">
    <%= render :partial => "/map/buttons" %>
  </p>
  <table id="map_area_selection_table" style="width: 100px;" onmousedown="setMouseMoveMode('startDrag')"  onmouseup="setMouseMoveMode('waiting')">
    <tbody>
    <tr class="top_bottom_map_selection" >
      <td class="map_area_selection_square" ></td>
      <td >&nbsp;</td>
      <td  class="map_area_selection_square" ></td>
    </tr>
    <tr id="middle_map_selection_tr">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="top_bottom_map_selection" >
      <td class="map_area_selection_square" id="map_area_left_bottom">&nbsp;</td>
      <td>&nbsp;</td>
      <td class="map_area_selection_square"  id="map_area_right_bottom"
        onmousedown="setMouseMoveMode('resize')" onmouseup="setMouseMoveMode('')" >&nbsp;</td>
    </tr>
    </tbody>
  </table>

</div>